<template>
  <div class="score-main">
    <div class="title" :class="this.isLos?'los':''"></div>
    <div class="star-list">
      <div class="star" v-for="(item,index) in StarList" :key="index" @touchend.stop="starTouch(item,index)"
        :style="starStyle(item)"></div>
    </div>
    <div class="button" :style="btnStyle" @touchend.stop="btnTouch"></div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      isLos: false,
      starCount: 0,
      StarList: [{}, {}, {}, {}, {}]
    }
  },
  computed: {
    starStyle(item) {
      return function (item) {
        return {
          filter: item.active ? 'drop-shadow(0px 0px 0.5rem rgb(254, 172, 81))' : 'grayscale(1)',
          transform: item.active ? 'scale(1.3)' : '',
          transition: 'all 0.5s'
        }
      }
    },
    btnStyle() {
      return {
        filter: this.StarList[0].active ? 'none' : 'grayscale(1)'
      }
    },
    ...mapGetters("picbookListStatus", {
      picbookIndex: "getPicbookIndex"
    }),
  },
  created() {
    this.StarList.forEach(item => {
      this.$set(item, 'active', false)
    })
  },
  methods: {
    starTouch: function (item, index) {
      this.touchMusic()
      this.starCount = index + 1
      this.$set(item, 'active', true)
      for (let i = 0; i <= index; i++) {
        this.StarList.forEach((item, sIndex) => {
          if (sIndex > i) this.$set(this.StarList[sIndex], 'active', false)
        })
        this.$set(this.StarList[i], 'active', true)
      }
    },
    btnTouch: async function () {
      if (this.StarList[0].active) {
        this.touchMusic()
        const json = {
          deviceUuid: this.deviceUuid,
          picbookId: this.picbookIndex.id,
          score: this.starCount
        }
        const [data, err] = await this.awaitWarp(this.$post(this.api.addScore, json))
        if (err) {
          this.setPopup({
            content: "保存失败,请检查网络"
          })
        }
        else {

          this.setLoading({
            callback: () => {
              this.$router.push({ path: "/recommend", query: { beforeRouter: this.$route.query.beforeRouter } })
            }
          })
        }
      }
      else {
        this.losMusic()
        this.isLos = true
        setTimeout(() => { this.isLos = false }, 1000)
      }
    },
    ...mapActions("mainStatus", ["setPopup", "setLoading"]),
  }
};
</script>

<style scoped lang='stylus'>
@import '../../common/stylus/content.styl'
.score-main
  position fixed
  width 100%
  height 100%
  background url($urlTitle + 'score/背景.png') 0 0 / 100% 100%
  z-index 99
  .title
    position absolute
    $center('WHLT', 20rem, 2rem)
    margin-top -5.5rem
    background url($urlTitle + 'score/标题文字.png') center center / contain no-repeat
  .star-list
    position absolute
    $center('WHLT', 22rem, 5rem)
    display flex
    justify-content space-around
    align-items center
    .star
      background url($urlTitle + 'score/星星-点击.png') center center / contain no-repeat
      width 3rem
      height 3rem
  .button
    position absolute
    $center('WHLT', 6rem, 3rem)
    margin-top 3rem
    background url($urlTitle + 'score/icon-提交-彩.png') center center / contain no-repeat
</style>
